<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        createElementVNode as _createElementVNode,
        toDisplayString as _toDisplayString,
        openBlock as _openBlock,
        createElementBlock as _createElementBlock,
        render,
        h,
        ref,
      } from "../js/runtime-dom/index.js";

      // import {
      //   createElementVNode as _createElementVNode,
      //   toDisplayString as _toDisplayString,
      //   openBlock as _openBlock,
      //   createElementBlock as _createElementBlock,
      //   render,
      //   h,
      //   ref,
      // } from "/js/vue.esm-browser.js";

      const MyComponent = {
        setup() {
          const name = ref("jw");
          setTimeout(() => {
            name.value = "handsome";
          }, 1000);
          return {
            name,
          };
        },
        render(_ctx, _cache, $props, $setup, $data, $options) {
          return (
            _openBlock(),
            _createElementBlock("div", null, [
              _createElementVNode("h1", null, "Hello World"),
              _createElementVNode(
                "span",
                null,
                _toDisplayString(_ctx.name.value),
                1 /* TEXT */
              ),
            ])
          );
        },
      };
      render(h(MyComponent), app);
    </script>
  </body>
</html>
